<template>
  <div style="background-color: #FFFFFF;padding: 25px">
    <div>
      <div class="title">基本信息</div>
      <a-form-model layout="vertical" ref="ruleForm" :rules="rules"  :model="formParam">
        <z-form-item :datas="fieldArr" :rules="rules" :form="formParam" :gutter="72"></z-form-item>
      </a-form-model>
    </div>
    <div>
      <div class="title">入职信息</div>
      <a-form-model layout="vertical" ref="ruleForm1" :model="formParam">
        <z-form-item :datas="fieldArr1" :rules="rules" :form="formParam" :gutter="72">
          <template slot="slots-groupLeader">
            <j-select-multi-user
              v-model="formParam.groupLeader"
              :buttons="false"
              :multiple="false"
              placeholder="请选择用户"
            />
          </template>
          <template slot="slots-region">
            <j-select-depart v-model="formParam.region" :multi="true"></j-select-depart>
          </template>
        </z-form-item>
      </a-form-model>
    </div>
    <div>
      <div class="title">教育背景</div>
      <formList :forList="forList" :rules="rules1" @dataset="formData"></formList>
    </div>
    <div>
      <div class="title">工作经历</div>
      <formList :forList="forList1" :rules="rules1" @dataset="formData1"></formList>
    </div>
    <div>
      <div class="title">账户信息</div>
      <div>
        <div class="title">PC端</div>
        <a-form-model layout="vertical" ref="ruleForm2"  :model="formParam">
          <z-form-item :datas="fieldArr2" :rules="rules" :form="formParam" :gutter="72"></z-form-item>
        </a-form-model>
      </div>
      <div>
        <div class="title">APP端</div>
        <a-form-model layout="vertical" ref="ruleForm3" :model="formParam">
          <z-form-item :datas="fieldArr3" :rules="rules" :form="formParam" :gutter="72"></z-form-item>
        </a-form-model>
      </div>
    </div>

    <a-button type="primary" @click="onSubmit">确定</a-button>
    <a-button style="margin-left: 50px" @click="onSubmit">取消</a-button>
  </div>
</template>

<script>
import formList from "@views/sjsk/modules/formList";
import {sysMessageAdd} from "@api/sjsk/information";
import {administrotorsAdd, getDepart} from "@api/sjsk/specialist";
export default {
  components:{formList},
  data() {
    return {
      formParam: {},
      fieldArr: [
        {label: '填报日期', prop: 'fillformTime', tagType: 'date-picker', span: 6},
        {label: '姓名', prop: 'personnelName', tagType: 'input', span: 6},
        {label: '出生日期', prop: 'birthday', tagType: 'date-picker', span: 6},
        {label: '籍贯', prop: 'nativePlace', tagType: 'dict-select', dictCode:'country', span: 6},
        {label: '身高（cm）', prop: 'height', tagType: 'input-number', span: 6},
        {label: '体重', prop: 'weight', tagType: 'input-number', span: 6},
        {label: '血型', prop: 'remittance', tagType: 'dict-select', dictCode:'blood_type', span: 6},
        {label: '民族', prop: 'bloodType', tagType: 'dict-select', dictCode:'nation', span: 6},
        {label: '政治面貌', prop: 'politicalOutlook', tagType: 'dict-select', dictCode:'political_status', span: 6},
        {label: '健康状态', prop: 'healthStatus', tagType: 'dict-select', dictCode:'health_type', span: 6},
        {label: '婚姻状态', prop: 'maritalStatus', tagType: 'dict-select', dictCode:'matrimony_type', span: 6},
        {label: '文化程度', prop: 'degreeEducation', tagType: 'dict-select', dictCode:'degreeEducation', span: 6},
        {label: '毕业院校', prop: 'graduationSchool', tagType: 'input', span: 6},
        {label: '专业', prop: 'major', tagType: 'input', span: 6},
        {label: '毕业时间', prop: 'graduationTime', tagType: 'date-picker', span: 6},
        {label: '身份证号', prop: 'identityCard', tagType: 'input', span: 6},
        {label: '居住地址', prop: 'residentialAddress', tagType: 'input', span: 6},
        {label: '户籍类型', prop: 'registeredResidenceType', tagType: 'dict-select', dictCode:'census_type', span: 6},
        {label: '户籍所在地', prop: 'registeredResidence', tagType: 'input', span: 6},
        {label: '本人联系电话', prop: 'phone', tagType: 'input', span: 6},
        {label: '本人电子邮箱', prop: 'email', tagType: 'input', span: 6},
        {label: '紧急联系人姓名', prop: 'emergencyName', tagType: 'input', span: 6},
        {label: '紧急联系人电话', prop: 'emergencyPhone', tagType: 'input', span: 6},
        {label: '头像上传', prop: 'head_file', tagType: 'upload-image', bizPath: 'scott/pic'},
      ],
      fieldArr1:[
        {label: '入职时间', prop: 'entryTime', tagType: 'date-picker', span: 6},
        {label: '职务', prop: 'duties', tagType: 'dict-select', dictCode:'specialist_duties_type', span: 6},
        {label: '小组长', prop: 'groupLeader', span: 6},
        {label: '禁毒社区', prop: 'region',span: 6},
        {label: '上传工作证', prop: 'administratorsFile', tagType: 'upload-file', span: 24},
      ],
      fieldArr2:[
        {label: '用户账号', prop: 'username', tagType: 'input', span: 6},
        {label: '登录密码', prop: 'password', tagType: 'password', span: 6},
        {label: '确认密码', prop: 'groupLeaderA', tagType: 'password', span: 6},
        {label: '工号', prop: 'residentialAddress', tagType: 'input', span: 6},
      ],
      fieldArr3:[
        {label: '用户账号', prop: 'appName', tagType: 'input', span: 6},
        {label: '登录密码', prop: 'appPass', tagType: 'password', span: 6},
        {label: 'VPN账号', prop: 'vpnName', tagType: 'input', span: 6},
        {label: 'VPN密码', prop: 'vpnPass', tagType: 'password', span: 6},
      ],
      rules: {
        fillformTime: [{ required: true, message: '请选择填报日期', trigger: 'change' },],
        personnelName: [{ required: true, message: '请填写姓名', trigger: 'change' },],
        personnelSex: [{ required: true, message: '请选择性别', trigger: 'change' },],
        birthday: [{ required: true, message: '请选择出生日期', trigger: 'change' },],
        nativePlace: [{ required: true, message: '请选择籍贯', trigger: 'change' },],
        degreeEducation: [{ required: true, message: '请选择文化程度', trigger: 'change' },],
        identityCard: [{ required: true, message: '请填写身份证号码', trigger: 'change' },],
        residentialAddress: [{ required: true, message: '请填写居住地址', trigger: 'change' },],
        registeredResidenceType: [{ required: true, message: '请选择户籍类型', trigger: 'change' },],
        registeredResidence: [{ required: true, message: '请填写户籍所在地', trigger: 'change' },],
        phone: [{ required: true, message: '请填写本人联系电话', trigger: 'change' },],
        emergencyName: [{ required: true, message: '请填写紧急联系人姓名', trigger: 'change' },],
        emergencyPhone: [{ required: true, message: '请填写紧急联系人电话', trigger: 'change' },],
        head_file: [{ required: true, message: '请上传', trigger: 'change' },],
        employmentStatus: [{ required: true, message: '请选择入职时间', trigger: 'change' },],
        duties: [{ required: true, message: '请选择职务', trigger: 'change' },],
        groupLeader: [{ required: true, message: '请选择小组长', trigger: 'change' },],
        region: [{ required: true, message: '请选择所属区域', trigger: 'change' },],
        // residentialAddress: [{ required: true, message: '请上传', trigger: 'change' },],
        administratorsFile: [{ required: true, message: '请上传', trigger: 'change' },],
        entryTime: [{ required: true, message: '请选择入职时间', trigger: 'change' },],
        // region: [{ required: true, message: '请选择职务', trigger: 'change' },],
      },
      forList:[
        {
          title:'起止日期',
          prop:'educationalStartTime',
          name:'educationalStartTime',
          tagType:'range-picker',
          dataIndex: 'educationalStartTime',
          width: '15%',
          scopedSlots: { customRender: 'educationalStartTime' }
        },
        {
          title:'学校/培训机构',
          prop:'schoolTrain',
          name:'schoolTrain',
          tagType:'input',
          dataIndex: 'schoolTrain',
          width: '10%',
          scopedSlots: { customRender: 'schoolTrain' }
        },
        {
          title:'专业/培训内容',
          prop:'majorTrainContent',
          name:'majorTrainContent',
          tagType:'input',
          dataIndex: 'majorTrainContent',
          width: '10%',
          scopedSlots: { customRender: 'majorTrainContent' }
        },
        {
          title:'获得学历/资质',
          prop:'education',
          name:'education',
          tagType:'input',
          dataIndex: 'education',
          width: '10%',
          dictCode:'sex',
          scopedSlots: { customRender: 'education' }
        },
        {
          title:'证明人',
          prop:'witness',
          name:'witness',
          tagType:'input',
          dataIndex: 'witness',
          width: '7%',
          scopedSlots: { customRender: 'witness' }
        },
        {
          title:'联系电话',
          prop:'witnessPhone',
          name:'witnessPhone',
          tagType:'input',
          dataIndex: 'witnessPhone',
          width: '7%',
          scopedSlots: { customRender: 'witnessPhone' }
        },
        {
          title: '操作',
          dataIndex: 'operation',
          width: '5%',
          scopedSlots: { customRender: 'operation' }
        }

      ],
      forList1:[
        {
          title:'起止日期',
          prop:'startTime',
          name:'startTime',
          tagType:'range-picker',
          dataIndex: 'startTime',
          width: '15%',
          scopedSlots: { customRender: 'startTime' }
        },
        {
          title:'工作单位',
          prop:'workCompany',
          name:'workCompany',
          tagType:'input',
          dataIndex: 'workCompany',
          width: '10%',
          scopedSlots: { customRender: 'workCompany' }
        },
        {
          title:'岗位',
          prop:'workPost',
          name:'workPost',
          tagType:'input',
          dataIndex: 'workPost',
          width: '10%',
          scopedSlots: { customRender: 'workPost' }
        },
        {
          title:'负责内容',
          prop:'responsibleContent',
          name:'responsibleContent',
          tagType:'input',
          dataIndex: 'responsibleContent',
          width: '10%',
          dictCode:'sex',
          scopedSlots: { customRender: 'responsibleContent' }
        },
        {
          title:'离职原因',
          prop:'reasonLeaving',
          name:'reasonLeaving',
          tagType:'input',
          dataIndex: 'reasonLeaving',
          width: '7%',
          scopedSlots: { customRender: 'reasonLeaving' }
        },
        {
          title:'薪酬',
          prop:'wages',
          name:'wages',
          tagType:'input',
          dataIndex: 'wages',
          width: '7%',
          scopedSlots: { customRender: 'wages' }
        },
        {
          title:'证明人',
          prop:'prove',
          name:'prove',
          tagType:'input',
          dataIndex: 'prove',
          width: '7%',
          scopedSlots: { customRender: 'prove' }
        },
        {
          title:'联系电话',
          prop:'provePhone',
          name:'provePhone',
          tagType:'input',
          dataIndex: 'provePhone',
          width: '7%',
          scopedSlots: { customRender: 'provePhone' }
        },
        {
          title: '操作',
          dataIndex: 'operation',
          width: '5%',
          scopedSlots: { customRender: 'operation' }
        }
      ],
      rules1:{
        educationalStartTime:[{ required: true, message: '请输入', trigger: 'change' }],
        schoolTrain:[{ required: true, message: '请输入', trigger: 'change' }],
        majorTrainContent:[{ required: true, message: '请输入', trigger: 'change' }],
        witness:[{ required: true, message: '请输入', trigger: 'change' }],
        witnessPhone:[{ required: true, message: '请输入', trigger: 'change' }],
      },
      arrData:[],
      arrData1:[],
      arrData2:[],
      arrData3:[],
      // formData:[],
      // arrData1:[]
    }
  },
  watch:{
    // formParam:{
    //   deep:true,
    //   handler(a,b){
    //     if(this.formParam.groupLeader){
    //       alert('监测到')
    //       getDepart().then(ser => {
    //         console.log(ser)
    //       })
    //     }
    //   }
    // }
  },
  methods: {
    formData(val){
      this.arrData = val
    },
    formData1(val){
      this.arrData1 = val
    },
    // 单选
    onChange(checkedList) {},
    onChangeCheck(e) {},
    onSubmit(){
      console.log({workExperiences:this.arrData}, {educational:this.arrData1}, {administrators:this.formParam})
      for(let item of this.arrData){
        delete item.key
        delete item.id
        item.educationalStopTime = item.educationalStartTime[1]
        item.educationalStartTime = item.educationalStartTime[0]
      }
      for(let item of this.arrData1){
        delete item.key
        item.stopTime	 = item.startTime[1]
        item.startTime = item.startTime[0]
      }
      let form = Object.assign({},{workExperiences:this.arrData}, {educational:this.arrData1}, {administrators:this.formParam})
      form.workExperiences.height = String(form.workExperiences.height)
      form.workExperiences.weight = String(form.workExperiences.weight)
      console.log(form)
      // wangqian@hnzxdxxjsyxgs.wecom.work
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          if(form.administrators.password === form.administrators.groupLeaderA){
            administrotorsAdd(form).then(ser => {
              console.log(ser)
              if(ser.success){
                this.$message.success('添加成功');
                this.$router.go (-1)
              } else {
                this.$message.error('请检查自己的数据');
              }
            }).catch(err => {
              console.log(err)
            })
          } else {
            this.$message.error('PC端两次密码不一致');
          }

        } else {

        }
      })
    }
  }
}
</script>

<style scoped lang="less">
@import '~@assets/less/common.less';
.title{
  width: 100%;
  border-bottom: 1px solid #E9E9E9;
  margin-bottom: 25px;
  padding-bottom: 15px;
  font-size: 18px;
  font-weight: 600
}
.slots-checkbox{

  :deep(&.ant-checkbox-group) {
    .ant-checkbox-wrapper {
      display: flex;
      align-items: center;
      margin-bottom: 16px;
      margin-left: 0;
      .label {
        width: 200px;
        display: inline-block;
      }
      .ant-calendar-picker {
        width: 240px;
        flex: 0 0 240px;
      }
      .ant-select {
        flex: 0 0 200px;
      }
    }
  }
}
</style>
